<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地图</title>
	<style>
		body{
			margin:0;
			padding:0;
		}
		.container{
			width:300px;
			height:300px;
		}
		.btn{
			width:60px;
			height:30px;
			line-height:30px;
			font-size:14px;
			text-align:center;
			background-color:orange;
			color:#fff;
			position:fixed;
			bottom:20px;
			left:14px;
			cursor:pointer;
			border-radius:4px;
		}
		.btn:nth-child(2){bottom:60px;}
	</style>
</head>
<body>
	<div class="container" id="box"></div>
	<div class="btn" id="big">放大</div>
	<div class="btn" id="small">缩小</div>
</body>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=dfd24ea231d2c56387040c906d304f0b"></script>
<script>
	(function(){
		var box = document.getElementById('box');
		var big = document.getElementById('big');
		var small = document.getElementById('small');
		var w = document.documentElement.clientWidth;
		var h = document.documentElement.clientHeight;
		box.style.width = w + 'px';
		box.style.height = h + 'px';


		var map = new AMap.Map('box');
		//map.setCity('沙河市');
		big.onclick = function(){
			map.zoomIn();
		}
		small.onclick = function(){
			map.zoomOut();
		}

		//  添加 地图监听事件
		// AMap.event.addListener(map, 'dragend', function(){
		// 	alert('tuo zhuai le');
		// });
		// 给地图加载插件
		map.plugin(['AMap.Scale'], function(){        //添加比例尺插件
			var scale = new AMap.Scale();
			map.addControl(scale);
		});

		map.plugin(['AMap.MapType'], function(){        //添加地图类型插件
			var type = new AMap.MapType();
			map.addControl(type);
		});

		map.plugin(['AMap.OverView'], function(){        //添加鹰眼插件
			var view = new AMap.OverView();
			view.open();
			map.addControl(view);
		});

		map.plugin(['AMap.ToolBar'], function(){        //添加工具条插件
			var tool = new AMap.ToolBar();
			map.addControl(tool);
		});

		// map.plugin(['AMap.MouseTool'], function(){        //添加测量面积插件
		// 	var mousetool = new AMap.MouseTool(map);
		// 	mousetool.measureArea();
		// });


		map.plugin(['AMap.RangingTool'], function(){        //添加测量面积插件
			var rangtool = new AMap.RangingTool(map);
			rangtool.turnOn();
		});



		//创建  覆盖物  marker
		var mark = new AMap.Marker({
			map:map,
			draggable: true
		});
		mark.setPosition(map.getCenter());

		

		var info = new AMap.InfoWindow({
			closeWhenClickMap:true,
			content: '这是窗体信息'
		});

		AMap.event.addListener(mark, 'click', function(){
			info.open(map, map.getCenter());
		});





	})()
</script>

</html>